{extend name="layout/base"}
{block name="title"}文章列表{/block}
{block name="main"}
    <div class="right-main">
        <div class="mdui-card border-1 mdui-shadow-0 mdui-m-b-2 layui-form">
            <div class="mdui-card-primary">
                <div class="mdui-toolbar mdui-p-a-0">
                    <a href="cate_add.html"><button class="mdui-btn border-1">添加文章</button></a>
                    <div class="mdui-toolbar-spacer"></div>
                    <div class="mdui-textfield">
                        <i class="mdui-icon material-icons">search</i>
                        <input class="mdui-textfield-input" type="email" placeholder="search"/>
                    </div>
                    <button class="mdui-btn border-1">搜索</button>
                    <button class="mdui-btn border-1">刷新</button>
                </div>
            </div>
            <div class="mdui-divider "></div>
            <div class="mdui-table-fluid mdui-m-t-1 mdui-m-a-1 mdui-shadow-0 ">
                <table class="mdui-table mdui-table-hoverable">
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>缩略图</th>
                        <th>分类</th>
                        <th>标题</th>
                        <th>作者</th>
                        <th>浏览</th>
                        <th>显示</th>
                        <th>置顶</th>
                        <th>时间</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    {foreach $articles as $key=>$vo}
                    <tr>
                        <td>{$vo.id}</td>
                        <td><img src="{$vo.pic}" height="50px"/></td>
                        <td>{$vo.category.name}</td>
                        <td>{$vo.title}</td>
                        <td>{$vo.admin.username}</td>
                        <td>{$vo.read}</td>
                        <td><input data-id="{$vo.id}" lay-filter="state" type="checkbox" {eq name="vo['state']" value="1"}checked{/eq} lay-text="开启|关闭" lay-skin="switch"></td>
                        <td><input data-id="{$vo.id}" lay-filter="top" type="checkbox" {eq name="vo['top']" value="1"}checked{/eq} lay-text="开启|关闭" lay-skin="switch"></td>
                        <td>{$vo.create_time}</td>
                        <td>
                            <a href="/admin/article/{$vo.id}/edit" class="link"><i class="mdui-icon material-icons">&#xe3c9;</i></a>
                            |
                            <a  href="javascript:deleteArticle({$vo.id})"><i class="mdui-icon material-icons">&#xe872;</i></a>
                        </td>
                    </tr>
                    {/foreach}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="mws-panel-content">
        <div class="list-page">
            {$articles|raw}
        </div>
    </div>
</div>
{/block}
{block name="script"}
<script>

    function deleteArticle(id) {
        layer.alert('确认删除？', function (index) {
            $.post('/admin/article/' + id, {_method: 'DELETE'}, res => {
                if (res.code === 1) {
                    layer.msg(res.msg, {icon: 6, time: 1500}, () => {
                        location.href = res.url
                    })
                } else {
                    layer.msg(res.msg, {icon: 5, time: 1500}, () => {
                        location.href = res.url
                    })
                }
            })
            layer.close(index);
        });
        return false;
    }


    layui.use('form', function () {
        var form = layui.form, layer = layui.layer, $ = layui.jquery;

        form.on('switch(state)', function (data) {
            var id = $(data.elem).attr("data-id");
            $.ajax({
                url: "/admin/article/state.html",
                data: {
                    id: id,
                },
                type: "get",
                dataType: "json",
                success: function (e) {
                    if (e.code == 1) {
                        layer.msg(e.msg, {
                            icon: 1
                        });
                    } else {
                        layer.msg(e.msg, {
                            icon: 2,
                            shade: 0.5,
                            time: 2000,
                            shadeClose: true
                        });
                    }
                }
            });
        });

        form.on('switch(top)', function (data) {
            var id = $(data.elem).attr("data-id");
            $.ajax({
                url: "/admin/article/top.html",
                data: {
                    id: id,
                },
                type: "get",
                dataType: "json",
                success: function (e) {
                    if (e.code == 1) {
                        layer.msg(e.msg, {
                            icon: 1
                        });
                    } else {
                        layer.msg(e.msg, {
                            icon: 2,
                            shade: 0.5,
                            time: 2000,
                            shadeClose: true
                        });
                    }
                }
            });
        });

        form.on('switch(state)', function (data) {
            const id = $(data.elem).attr("data-id");
            const value = $(data.elem).attr("value") === '1' ? 0 : 1;
            $.post('/admin/article/up_state/' + id, {status: value}, res => {
                if (res.code === 1) layer.msg(res.msg, {icon: 6, time: 900, anim: 2})
                else layer.msg(res.msg, {icon: 5, time: 1000, anim: 6})
            })
        });

        form.on('switch(top)', function (data) {
            const id = $(data.elem).attr("data-id");
            const value = $(data.elem).attr("value") === '1' ? 0 : 1;
            $.post('/admin/article/up_top/' + id, {status: value}, res => {
                if (res.code === 1) layer.msg(res.msg, {icon: 6, time: 900, anim: 2})
                else layer.msg(res.msg, {icon: 5, time: 1000, anim: 6})
            })
        });

    });
</script>
{/block}